<template>
    <el-container>
        <el-header height="80px" style="padding: 10px;">
            <!-- 工具/搜索栏 -->
            <div style="padding: 5px; background: #F2F6FC; border-radius: 5px;">
                <div class="topbar">
                    <div class="left-panel">
                        <el-button icon="el-icon-refresh" @click="refresh">刷新</el-button>
                    </div>
                    <div class="right-panel">
                        <div class="right-panel-search">
                            <config-group-select  v-model="searchForm.configGroupId" :placeholder="'请选择配置分组'" style="width: 160px;"></config-group-select>
                            <el-date-picker
                            v-model="opTimeRanges"
                            type="daterange"
                            @change="setTime"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            clearable="">
                            </el-date-picker>
                            <el-input v-model="searchForm.searchText" placeholder="搜索关键词..." style="width: 200px;"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="getList()"></el-button>
                        </div>
                    </div>
                </div>
            </div>       
        </el-header>

        <el-main style="padding-left: 10px; padding-right: 10px;">
            <el-card shadow="always" body-style="padding: 0px; min-height: 500px;">
                <el-table
                ref="Table"
                :data="pageResult.list"
                element-loading-text="加载数据中"
                v-loading="loading"
                :header-row-style="{height:45+'px'}"
                :row-style="{height:60+'px'}"
                style="width: 100%; min-height: 450px;"
                :header-cell-style="{background:'#F2F6FC'}">
                    <el-table-column prop="id"          label="序号"    width="100" ></el-table-column>
                    <el-table-column prop="configGroupName"  label="配置分组" ></el-table-column>
                    <el-table-column prop="configFileName"  label="配置文件名称" ></el-table-column>
                    <el-table-column prop="remark"  label="配置描述" ></el-table-column>
                    <el-table-column prop="fileExtension"     label="拓展名" ></el-table-column>
                    <el-table-column prop="sign"   label="MD5签名" ></el-table-column>
                    <el-table-column prop="releaseTime"  label="发布时间" ></el-table-column>
                    <el-table-column prop="releaseUser"  label="发布账号" ></el-table-column>
                    <el-table-column label="操作" width="130">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                style="color: #67C23A"
                                icon="el-icon-view"
                                @click="views(scope.$index, scope.row)">查看</el-button>   
                        </template>
                    </el-table-column>
                    <template #empty>
                        <el-empty :description="'查无数据'" :image-size="100"></el-empty>
                    </template>
                </el-table>
                <pagination :total="pageResult.total" @page-change="pageChange"></pagination>
            </el-card>
            
        </el-main>

        <el-dialog 
            :title="currentRow.configFileName + '.' + currentRow.fileExtension" 
            :visible.sync="visibleViewsDialog"
            v-if="visibleViewsDialog"
            width="1000px"
            :show-close="true"
            @close="closeViews()"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            append-to-body>
                        
            <el-descriptions direction="vertical" :column="2" border>
                <el-descriptions-item label="发布时间">{{ currentRow.releaseTime==null?'-':currentRow.releaseTime }}</el-descriptions-item>
                <el-descriptions-item label="发布人">{{ currentRow.releaseUser==null?'-':currentRow.releaseUser }}</el-descriptions-item>
                <el-descriptions-item label="配置">
                    <code-mirror v-model="currentRow.configContent" :mode="currentRow.fileExtension"></code-mirror>
                </el-descriptions-item>
            </el-descriptions>

        </el-dialog>

    </el-container>
</template>

<script>
import ConfigGroupSelect from './modules/config_group_select.vue'
import CodeMirror from '../commons/codemirror.vue'

export default {
    components: {
        CodeMirror,
        ConfigGroupSelect
    },
    data() {
        return {
            opTimeRanges: null,
            searchForm: {
                configGroupId: null,
                searchText: '',
                bgnTime: null,
                endTime: null
            },
            pageResult: { 
                total: 0,
                pageNum: 1,
                pageSize: 10,
                list: []
            },
            loading: false,
            visibleViewsDialog: false,
            currentRow: {},
        }
    },
    mounted() {       
        // 初始化列表
        const configGroupId = this.$route.query.configGroupId
        if (configGroupId != null) {
          this.searchForm.configGroupId = configGroupId;
        }
        const configName = this.$route.query.configName
        if (configName != null) {
          this.searchForm.searchText = configName
        }
        this.getList()
    },
    methods: {
        /**
         * @title 获取列表
         */
        async getList() {
            this.loading = true
            let response = await this.$API.configRelease.getList(this.searchForm)   
            this.pageResult = response.data
            this.loading = false         
        },

        refresh() {
            this.searchForm.searchText = ''
            this.searchForm.bgnTime = null
            this.searchForm.endTime = null
            this.searchForm.configGroupId = null
            this.opTimeRanges = null
            this.getList()
        },

        /**
         * @title 更改分页
         */
        pageChange(pageNum, pageSize) {
            this.searchForm.pageNum = pageNum
            this.searchForm.pageSize = pageSize
            this.getList()
        },

        setTime(val) {
            this.searchForm.bgnTime = val[0]
            this.searchForm.endTime = val[1]
        },

        views(index, row) {
            this.visibleViewsDialog = true
            this.currentRow = row
        },

        closeViews() {
            this.visibleViewsDialog = false
            this.currentRow = {}
        },
       
    }
}
</script>

<style lang="scss" scoped>
.el-main {
    width: 100%;
    height: 100%;
    padding: 0px;
}
.topbar {
    height: 50px; 
    display: flex;
    justify-content:space-between;
    margin-bottom: 0px;

    .left-panel {
        display: flex;
        align-items: center;
    }
    .right-panel {
        display: flex;
        align-items: center;
    }

    .right-panel-search {display: flex;align-items: center;}

    .right-panel-search > * + * {margin-left:10px;}
}


</style>